<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
		<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
		<meta http-equiv="X-UA-Compatible" content="IE=EDGE, chrome=1">
		<meta http-equiv="Access-Control-Allow-Origin" content="*">
		<meta http-equiv="content-security-policy">
		<title>录音</title>
	</head>
	<body>
		<style type="text/css">
			a,button,input{outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-user-modify: read-write-plaintext-only;}
			
			body{
				height: 90vh;
				display: flex;
				flex-direction: column;
				justify-content: center;
			}
			#recordBox{
				/* display: none; */
				width: 100px;
				border: 1px solid black;
				margin: 0 auto;
				text-align: center;
				margin: 20px auto;
				padding: 10px;
				border-radius: 10px;
				color: rgba(0,0,0,0.6);
			}
			
			.btnBoxs{
				width: 100%;
				display: flex;
				flex-wrap: nowrap;
				justify-content: center;
				align-items: center;
			}
			
			.btnBoxs input{
				display: inline-block;
				width: 70px;
				border: none;
				border-radius: 5px;
				margin: 2px;
				padding: 5px !important;
				background-color: #409EFF;
				color: red;
			}
			
			.btnBoxs input[disabled]{
				background-color: rgba(0,0,0,0.1);
				color: rgba(0,0,0,0.3);
			}
			
			.btnBoxs input:active{
				background-color: #40DDEE;
			} 
			
			.audioBox{
				display: flex;
				flex-wrap: nowrap;
				justify-content: center;
				align-items: center;
				margin-top: 10px;
			}
		</style>
		<div id="recordBox">
			<span id="timeBox">00:00</span>
		</div>
		<div class="btnBoxs">
			<!-- <input type="button" value="获取录音权限" readonly onclick="openRecord()"> -->
			<input type="button" value="开始录音" readonly onclick="recStart()" class="mui-btn mui-btn startBtn" disabled>
			<input type="button" value="结束录音" readonly onclick="recStop()" class="mui-btn mui-btn stopBtn" disabled>
			<input type="button" value="上传录音" readonly onclick="upLoadRecord()" class="mui-btn mui-btn playBtn">
		</div>
		
		<div class="audioBox">
			<audio id="recordAudio" controls nodownload></audio>
		</div>
	</body>

	<script src="recorder.mp3.min.js"></script>
	<script src="recorder-core.js"></script>
	<!--必须引入的录音核心，CDN: https://cdn.jsdelivr.net/gh/xiangyuecn/Recorder@latest/dist/recorder-core.js-->
	<script src="mp3.js"></script>
	<!--相应格式支持文件；如果需要多个格式支持，把这些格式的编码引擎js文件放到后面统统加载进来即可-->
	<script src="mp3-engine.js"></script>
	<!--如果此格式有额外的编码引擎的话，也要加上-->
	<script src="waveview.js"></script>
	<!--可选的扩展支持项-->
	<script src="jQuery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
	
	<script src="mui.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" type="text/css" href="mui.css"/>
	
	<script type="text/javascript">
		var rec;
		var audioSrc="";
		var audio = $("#audioBox")[0];
		var timeInterval=null;
		var timeNum=0;

		var openRecord = function(success) { //一般在显示出录音按钮或相关的录音界面时进行此方法调用，后面用户点击开始录音时就能畅通无阻了
			rec = Recorder({
				type: "mp3",
				sampleRate: 16000,
				//mp3格式，指定采样率hz、比特率kbps，其他参数使用默认配置；注意：是数字的参数必须提供数字，不要用字符串；需要使用的type类型，需提前把格式支持文件加载进来，比如使用wav格式需要提前加载wav.js编码引擎
				bitRate: 16, 
				onProcess: function(buffers, powerLevel, bufferDuration, bufferSampleRate, newBufferIdx, asyncEnd) {
					//录音实时回调，大约1秒调用12次本回调
					//可利用extensions/waveview.js扩展实时绘制波形
					//可利用extensions/sonic.js扩展实时变速变调，此扩展计算量巨大，onProcess需要返回true开启异步模式
				}
			});
			
			//打开麦克风授权获得相关资源
			rec.open(function() { 
				mui.toast("获取录音权限成功");
				$(".startBtn").attr("disabled", false)
				$(".startBtn").attr("disabled", false)
				success && success();
			}, function(msg, isUserNotAllow) { 
				//用户拒绝未授权或不支持
				mui.toast((isUserNotAllow ? "UserNotAllow，" : "") + "无法录音:" + msg)
			});
		};
		
		/**开始录音**/
		openRecord();
		//打开了录音后才能进行start、stop调用
		function recStart() { 
			openRecord();
			timeInterval=null;
			audioSrc="";
			$("#recordAudio").attr("src",audioSrc)
			$("#recordBox")[0].style.display="block";
			$(".startBtn").attr("disabled",true);
			$(".stopBtn").attr("disabled",false);
			timeInterval=setInterval(timeBegin,1000);
			rec.start();
		};
		
		/**结束录音**/
		function recStop() {
			rec.stop(function(blob, duration) {
				//释放录音资源
				$(".startBtn").attr("disabled",false);
				$(".stopBtn").attr("disabled",true);
				timeNum=0;
				timeBegin(timeNum);
				clearInterval(timeInterval);
				//已经拿到blob文件对象
				audioSrc= (window.URL || webkitURL).createObjectURL(blob);
				alert(audioSrc);
				$("#recordAudio").attr("src",audioSrc)
				mui.toast("录音成功");
			}, function(msg) {
				mui.toast("录音失败:" + msg)
			});
		};

		/**上传录音**/
		function upLoadRecord() {
			location.href=audioSrc;
		};
		
		// 开始录音计时
		function timeBegin(){
			var minutes= isNeedZero(Math.floor(timeNum/60));
			var seconds= isNeedZero(timeNum%60)
			$("#timeBox").text(minutes + ":" + seconds);
			timeNum++;
		}
		
		function isNeedZero(num){
			if(num<10){
				return "0"+num
			}else{
				return num
			}
		}
	</script>
</html>
